﻿var mousePressed = false;
var lastX, lastY;
var ctx;
var isClearDraw = false;
// var clientWidth = $$('.write-box')[0].clientWidth;
// var clientHeight = $$('.write-box')[0].clientHeight - $$('.write-nav')[0].clientHeight;
var cPushArray = new Array();
var cStep = -1;
var clientWidth = $$('.canvas-box .canvas').width();
var clientHeight = $$('.canvas-box .canvas').height();

var startTouch;

function setupCanvas(canvas) {
    // Get the device pixel ratio, falling back to 1.
    var dpr = window.devicePixelRatio || 1;
    if (dpr > 1) {
        dpr = 2;
    }
    // Get the size of the canvas in CSS pixels.
    var rect = canvas.getBoundingClientRect();
    // Give the canvas pixel dimensions of their CSS
    // size * the device pixel ratio.
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    var ctx = canvas.getContext('2d');
    // Scale all drawing operations by the dpr, so you
    // don't have to worry about the difference.
    ctx.scale(dpr, dpr);
    return ctx;
}

function InitThis() {
    ctx = setupCanvas(document.getElementById('myCanvas'));

    document.getElementById('myCanvas').addEventListener('touchstart', function (e) {
        e.preventDefault();
        let touches = e.targetTouches;
        let startX = touches[0].pageX;
        let startY = touches[0].pageY;
        mousePressed = true;
        Draw(startX - $$(this).offset().left, startY - $$(this).offset().top, false);
    });
    document.getElementById('myCanvas').addEventListener('touchmove', function (e) {
        e.preventDefault();
        if (mousePressed) {
            let touches = e.targetTouches;
            if (touches.length > 1) {
                console.log(1)
                return false;
            }
            let startX = touches[0].pageX;
            let startY = touches[0].pageY;
            
            Draw(startX - $$(this).offset().left, startY - $$(this).offset().top, true);
        }
    });
    document.getElementById('myCanvas').addEventListener('touchend', function (e) {
        e.preventDefault();
        if (mousePressed) {
            mousePressed = false;
            cPush();
        }
    });
}

function drawImage() {
    ctx.clearRect(0, 0, clientWidth, clientHeight);
    var image = new Image();
    if (isClearDraw && cPushArray.length > 0) {
        image.src = cPushArray[cStep];
        image.setAttribute("crossOrigin",'Anonymous');
        $$(image).load(function () {
            ctx.drawImage(image, 0, 0, clientWidth, clientHeight);
        });
        isClearDraw = false;
    } else {
        image.src = document.getElementById('myCanvas').toDataURL();
        $$(image).load(function () {
            ctx.drawImage(image, 0, 0, clientWidth, clientHeight);
            cPush();
        });
    }
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = '#f00';
        ctx.lineWidth = 1;
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;
}

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('myCanvas').toDataURL());
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        let canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.setAttribute("crossOrigin",'Anonymous');
        canvasPic.onload = function () {
            ctx.clearRect(0, 0, this.width, this.height);
            ctx.drawImage(canvasPic, 0, 0, clientWidth, clientHeight);
        }
    }
}
function cRedo() {
    if (cStep < cPushArray.length - 1) {
        cStep++;
        let canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.setAttribute("crossOrigin",'Anonymous');
        canvasPic.onload = function () {
            ctx.clearRect(0, 0, this.width, this.height);
            ctx.drawImage(canvasPic, 0, 0, clientWidth, clientHeight);
        }
    }
}